.api-manage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--module);
    padding: 8px 8px 0 8px;

    .api-info-panel {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 16px;
        background-color: transparent;

        .apipost-input-inner-wrapper {
            border-radius: var(--border-radius-default);
            border: 1px solid var(--border-color-strong);
            background-color: var(--background-color-tertiary);
            color: var(--content-color-secondary);
            height: 28px;

            input {
                color: var(--content-color-primary);
            }
        }

        .api-explain {
            height: 28px;
            line-height: 28px;
            margin: 0 8px;
            background-color: var(--background-color-tertiary);

            svg {
                background-color: var(--background-color-tertiary);
                fill: var(--content-color-primary);
            }

            :hover {
                background-color: var(--highlight-background-color-tertiary);

                svg {
                    background-color: var(--highlight-background-color-tertiary);
                    // fill: var(--content-color-primary);
                    fill: var(--font-1);
                }
            }
        }


        .api-name-group {
            // flex: 1;
            display: flex;
            align-items: center;
            border-radius: var(--border-radius-default);
            background-color: var(--background-color-tertiary);
            overflow: hidden;
            background-color: transparent !important;

            .api-name {
                flex: 1;
                margin: 0;
                padding: 0;
                border: 0;
                background-color: var(--bg);
                width: 388px;
                height: 26px;

                input {
                    height: 26px;
                    padding: 0 8px;
                    color: var(--content-color-primary);
                    width: 388px;
                }

                border: none;
                border-radius: 5px;
            }

            .api-status {
                width: 82px;
                background-color: var(--background-color-tertiary);

            }
        }

        .apipost-btn {
            height: 28px;
            line-height: 28px;
            min-width: 28px;
        }

        .apipost-btn:hover,
        .apipost-btn:focus,
        .apipost-btn-default:hover,
        .apipost-btn-default:focus {
            color: var(--content-color-primary);
            border-color: 0;
            background-color: var(--highlight-background-color-tertiary);

            svg {
                background-color: var(--highlight-background-color-tertiary);
                fill: var(--content-color-primary);
            }
        }
    }

    .save-btn {
        width: 64px;
        height: 25px;
        padding: 12px;
        background-color: var(--theme-color);
        border-radius: 3px;
        color: var(--font-1);
        margin-right: 4px;
    }

    .down-btn {
        height: 25px;
        background-color: var(--theme-color);
        border-radius: 3px;

        svg {
            fill: var(--common-white);
        }
    }

    .info-panel-right {
        margin-right: 24px;
        display: flex;
        align-items: center;

        .arco-btn-group {
            display: flex;
            align-items: center;
        }

        .arco-btn:hover {
            background-color: transparent;
            border-color: var(--theme-color);
            color: var(--font-1) 
        }

        .save-btn {
            background: var(--theme-10) !important;
            border-radius: 3px 0px 0px 3px;
            border: none !important;
            height: 32px !important;
            margin-right: 0;
            display: flex;
            align-items: center;
            font-size: 12px;
            width: 66px;
            color: var(--theme-color) !important;
            border-right: 2px solid var(--theme-20) !important;

            svg {
                min-width: 14px;
                min-height: 14px;
                fill: var(--theme-color) !important;
            }

            span {
                margin-left: 4px;
            }
        }

        .save-more-btn {
            background: var(--theme-10) !important;
            border-radius: 0px 3px 3px 0px;
            border: none !important;
            height: 32px !important;
            width: 24px;

            svg {
                stroke: var(--theme-color) !important;
                
            }
        }
    }
}